<template>
  <div class="pagew11">
    <div class="contant fadeInDown">
      <p>2022年，“同路人”作为集团客商统一信息库，累计管理客商<span class="yellowfont">29万</span>家，识别黑灰名单企业<span class="yellowfont">1.1万</span>家。</p>
      <p></p>
      <p>未来同路人将更好把控客商合作风险关口，构建客商合作生态，打造更广阔的集团朋友圈。</p>
    
    </div>
    <div class="img1">
      <div class="wd">
        <img class="left1 animate__bounceInLeft" src="../../assets/images/bill2022/w11/gw.png">
        <img class="left2 animate__bounceInLeft2" src="../../assets/images/bill2022/w11/hy.png">
        <img class="center animate__opacity" src="../../assets/images/bill2022/w11/tlr.png">
        <img class="right1 animate__bounceInLeft3" src="../../assets/images/bill2022/w11/ywd.png">
        <img class="right2 animate__bounceInLeft4" src="../../assets/images/bill2022/w11/ysp.png">
        <img class="right3 animate__opacity" src="../../assets/images/bill2022/w11/topIcon.png" alt="">
      </div>
      <div class="jsc ">
        <img class="tpwz" src="../../assets/images/bill2022/w11/tlrwz.png">
        <img src="../../assets/images/bill2022/w11/jsc.png">
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components: {
  },
  // 定义属性
  data() {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
}
</script>

<style lang='less' scoped>
.pagew11{

    display: flex;
  align-items: center;
  flex-direction: column;
  .contant {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }

.img1 {
  width: 100%;
  position: absolute;
  bottom: 0;
  .jsc{
    position: relative;
    .tpwz{
      position: absolute;
      width: 8rem;
      z-index: 6;
      bottom: 16rem;
      left: 41%;

    }
  }

  .wd {
    position: relative;
    bottom: 16rem;

    .left1 {
      position: absolute;
      width: 15rem;
      bottom: -20rem;
      left: 6rem;
      z-index: 4;
    }

    .left2 {
      position: absolute;
      width: 18.5rem;
      bottom: -22rem;
      left: 2rem;
      z-index: 3;
    }

    .center {
      position: absolute;
      width: 20.5rem;
      bottom: -22rem;
      left: 11rem;
      z-index: 5;
    }

    .right1 {
      position: absolute;
      width: 22rem;
      bottom: -21rem;
      right: 6rem;
      z-index: 1;
    }

    .right2 {
      position: absolute;
      width: 18rem;
      bottom: -26rem;
      right: 3rem;
      z-index: 2;
    }
    .right3 {
      position: absolute;
      width: 10rem;
      bottom: -4rem;
      right: 10rem;
      
    }

  }

  img {
    width: 100%;
  }
}
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0)
  }


  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    transform: scale3d(0);
    -webkit-transform: scale3d(0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transform: scale3d(1);
    -webkit-transform: scale3d(1);
  }
}

.swiper-slide-active .animate__backInUp {
  animation: backInUp 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes backInUp {
  0% {
    -webkit-transform: translateY(4000px) scale(.4);
    transform: translateY(4000px) scale(.4);
    opacity: .7
  }


  to {
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
    opacity: 1
  }
}
@keyframes bounceInLeft {

0%,
60%,
75%,
90%,
to {
  -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
  transform: translate3d(-3000px, 0, 0) scaleX(3)
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
  transform: translate3d(25px, 0, 0) scaleX(1)
}

75% {
  -webkit-transform: translate3d(-10px, 0, 0) scaleX(.98);
  transform: translate3d(-10px, 0, 0) scaleX(.98)
}

90% {
  -webkit-transform: translate3d(5px, 0, 0) scaleX(.995);
  transform: translate3d(5px, 0, 0) scaleX(.995)
}

to {
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}
}

.swiper-slide-active .animate__bounceInLeft {
  
  animation: bounceInLeft 2s ease-in-out;
  animation-iteration-count: 1;
  
}
.swiper-slide-active .animate__bounceInLeft2 {
  animation: bounceInLeft 2.2s ease-in-out;
  animation-iteration-count: 1;
}
@keyframes bounceInRight {

0%,
60%,
75%,
90%,
to {
  -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
  animation-timing-function: cubic-bezier(.215, .61, .355, 1)
}

0% {
  opacity: 0;
  -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
  transform: translate3d(3000px, 0, 0) scaleX(3)
}

60% {
  opacity: 1;
  -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
  transform: translate3d(-25px, 0, 0) scaleX(1)
}

75% {
  -webkit-transform: translate3d(10px, 0, 0) scaleX(.98);
  transform: translate3d(10px, 0, 0) scaleX(.98)
}

90% {
  -webkit-transform: translate3d(-5px, 0, 0) scaleX(.995);
  transform: translate3d(-5px, 0, 0) scaleX(.995)
}

to {
  -webkit-transform: translateZ(0);
  transform: translateZ(0)
}
}




.swiper-slide-active .animate__bounceInLeft3 {
  animation: bounceInRight 2.4s ease-in-out;
  animation-iteration-count: 1;
}
.swiper-slide-active .animate__bounceInLeft4 {
  animation: bounceInRight 2.6s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes opacitys {
  0% {
    opacity: 0;
   
  }

  to {
    opacity: 1;
   
  }
}

.swiper-slide-active .animate__opacity {
  animation: opacitys 3s ease-in-out;
  animation-iteration-count: 1;
}


</style>